import { useState, useCallback } from 'react'
import Segment from '@/components/ui/Segment'

const Controlled = () => {
    const [singleSegmentValue, setSingleSegmentValue] = useState('left')
    const [multipleSegmentValue, setMultipleSegmentValue] = useState(['center'])

    const onSingleSelectionSegmentChange = useCallback(
        (val: string) => {
            setSingleSegmentValue(val)
        },
        [setSingleSegmentValue],
    )

    const onMultipleSegmentValueChange = useCallback(
        (val: string[]) => {
            setMultipleSegmentValue(val)
        },
        [setMultipleSegmentValue],
    )

    return (
        <>
            <div className="mb-6">
                <h6 className="mb-3">انتخاب تک</h6>
                <Segment
                    value={singleSegmentValue}
                    onChange={(val) =>
                        onSingleSelectionSegmentChange(val as string)
                    }
                >
                    <Segment.Item value="left">چپ</Segment.Item>
                    <Segment.Item value="center">مرکز</Segment.Item>
                    <Segment.Item value="right">راست</Segment.Item>
                </Segment>
            </div>
            <div>
                <h6 className="mb-3">انتخاب چندگانه</h6>
                <Segment
                    selectionType="multiple"
                    value={multipleSegmentValue}
                    onChange={(val) =>
                        onMultipleSegmentValueChange(val as string[])
                    }
                >
                    <Segment.Item value="left">چپ</Segment.Item>
                    <Segment.Item value="center">مرکز</Segment.Item>
                    <Segment.Item value="right">راست</Segment.Item>
                </Segment>
            </div>
        </>
    )
}

export default Controlled
